<template>
  <view class="car-camera">
		<up-toast ref="uToast" />
    <camera flash="off" @error="handleError" class="car-camera-camera"></camera>
    <view class="car-camera-cover">
			<view class="car-camera-cover-returnBtn" @click="handleReturnPage">
				<up-icon name="arrow-left" color="white" size="24"></up-icon>
				<text class="car-camera-cover-returnBtn-text">返回</text>
			</view>
      <image class="car-camera-cover-img" mode="aspectFit" src="@/static/image/driving_license.png" />
      <view class="car-camera-cover-bottomBtn">
        <view class="car-camera-cover-bottomBtn-sub" @click="handlePickPhoto">
          <up-icon name="photo" color="white" size="36"></up-icon>
          <text class="car-camera-cover-bottomBtn-sub-text">相册选取</text>
        </view>
        <view class="car-camera-cover-bottomBtn-main" @click="handleTakePhoto" />
        <view v-if="isShowEdit" class="car-camera-cover-bottomBtn-sub" @click="handleEdit">
          <up-icon name="edit-pen" color="white" size="36"></up-icon>
          <text class="car-camera-cover-bottomBtn-sub-text">手动录入</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
	import { ref } from "vue";
  import { onLoad } from "@dcloudio/uni-app";

  onLoad(options => {
    isShowEdit.value = options.isShowEdit === '0' ? false : true;
  })
	
	const src = ref('');
  const isShowEdit = ref(true);
	const uToast = ref(null)
	
	const handlePickPhoto = () => {
		uni.chooseImage({
			count: 1,
			sourceType: ['album'], //从相册选择
			success: function (res) {
				console.log('相册选择', res, res.tempImagePath);
				const file = res.tempFiles[0]; // path, size
				const kbSize = file.size / 1024;
				if (kbSize <= 10 * 1024) {
					src.value = file.path;
					uni.redirectTo({
						url: `/pages/addCar/addCar?drivingLicenseImg=${file.path}`
					})
				} else getApp().globalData.toast.error(uToast.value, '照片超过最大限制10M');
			}
		});
	}
	
	const handleTakePhoto = () => {
		const ctx = uni.createCameraContext();
		ctx.takePhoto({
		  quality: 'high',
		  success: res => {
		    src.value = res.tempImagePath;
				uni.redirectTo({
					url: `/pages/addCar/addCar?drivingLicenseImg=${res.tempImagePath}`
				})
		  }
		});
	}
	
	const handleEdit = () => {
		//直接跳转手动编辑页，并携带参数cameraAuth=1
		uni.redirectTo({
			url: '/pages/addCar/addCar'
		})
	}
	
	const handleError = () => {
		//直接跳转手动编辑页，并携带参数cameraAuth=0，显示一个文字：重新设置相机权限，并返回拍照识别
		uni.redirectTo({
			url: '/pages/addCar/addCar'
		})
	}
	
	const handleReturnPage = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
  .car-camera {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: black;
    &-camera {
      width: 100%;
      height: 100%;
      // background-image: url('~@/static/image/driving_license.png');
    }

    &-cover {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
			
			&-returnBtn {
				position: absolute;
				top: 115rpx;
				left: 12px;
				@include flex-row;
				
				&-text {
					margin-left: 4px;
					font-size: 14px;
					color: white;
				}
			}

      &-img {
        position: absolute;
        top: 160rpx;
        left: 50%;
        /* width: 50%; */
        transform: translateX(-50%);
        height: calc(100% - 360rpx);
      }

      &-bottomBtn {
        box-sizing: border-box;
        position: absolute;
        bottom: 20px;
        padding: 0 12px;
        @include size(100%, 140rpx);
        @include flex-row(space-between, center);

        &-sub {
          @include flex-column(center, center);
          &-text {
            font-size: 14px;
            color: white;
          }
        }

        &-main {
          position: absolute;
					left: 50%;
          transform: translateX(-50%);
          @include size(140rpx, 100%);
        }

        &-main::before,
        &-main::after {
          content: '';
          position: absolute;
          border-radius: 50%;
        }

        &-main::before {
          width: 100%;
          height: 100%;
          background-color: white; /* 外层圆的颜色 */
        }

        &-main::after {
          width: 85%;
          height: 85%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #125796; /* 内层圆的颜色 */
        }
      }
    }
  }
</style>
